<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="学院">
        <el-select v-model="formInline.region" placeholder="学院">
          <el-option
            v-for="(item, index) in collegeName"
            :key="index"
            :label="item.college"
            :value="item.college"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="onAdd">添加</el-button>
        <!-- <el-upload
          class="upload-demo"
          ref="upload"
          action=""
          :auto-upload="false"
          :on-change="handle"
        >
          <el-button slot="trigger" size="small" type="primary"
            >选取文件</el-button
          >
          <el-button
            style="margin-left: 10px"
            size="small"
            type="success"
            @click="submitUpload"
          >
            上传到服务器
          </el-button>
        </el-upload> -->
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账号" width="200">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.num }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属学院" width="220">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.collage }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">
            查看
          </el-button>
          <el-button size="mini" @click="handleUpdate(scope.row)">
            修改密码
          </el-button>
          <el-button size="mini" @click="handleDelete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加弹出框 -->
    <el-dialog title="添加" :visible.sync="dialogVisible" width="30%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="教职工号" prop="num">
          <el-input v-model="ruleForm.num"></el-input>
        </el-form-item>
        <el-form-item label="学院" prop="region">
          <el-select v-model="ruleForm.region" placeholder="学院">
            <el-option
              v-for="(item, index) in collegeName"
              :key="index"
              :label="item.college"
              :value="item.college"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="true_add">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改密码弹出框 -->
    <el-dialog title="提示" :visible.sync="dialogVisibless" width="30%">
      <el-form ref="forms" :rules="rules" :model="forms" label-width="80px">
        <el-form-item label="密码">
          <el-input v-model="forms.old" disabled></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="new">
          <el-input v-model="forms.new"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibless = false">取 消</el-button>
        <el-button type="primary" @click="trueUpdate">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 查看弹出框 -->
    <el-dialog title="详情" :visible.sync="dialogVisibles" width="30%">
      <el-descriptions class="margin-top" :column="1" border>
        <el-descriptions-item>
          <template slot="label"> 用户名 </template>
          {{ sinfo.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 学院 </template>
          {{ sinfo.collage }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 账号 </template>
          {{ sinfo.num }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 电话 </template>
          {{ sinfo.phone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 邮箱 </template>
          {{ sinfo.email }}
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibles = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibles = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import xlsx from "xlsx";
import { readFiles } from "../../../assets/lib/utils";
export default {
  created() {
    this.get_collegeName();
  },
  data() {
    return {
      sinfo: {},
      ruleForm: {},
      forms: {
        old: "",
        new: "",
      },
      college_name: [],
      header: {
        authorization: window.sessionStorage.token,
      },
      rules: {
        new: [
          { required: true, message: "必填", trigger: "blur" },
          { min: 6, max: 12, message: "密码6-12位", trigger: "blur" },
        ],
        name: { required: true, message: "必填", trigger: "blur" },
        region: { required: true, message: "必填", trigger: "blur" },
        num: [
          { required: true, message: "必填", trigger: "blur" },
          { min: 6, max: 12, message: "账号6-12位", trigger: "blur" },
        ],
      },
      dialogVisible: false,
      dialogVisibles: false,
      dialogVisibless: false,
      formInline: {},
      tableData: [],
      fileinfo: [],
    };
  },
  computed: {
    ...mapState(["collegeName"]),
  },
  methods: {
    // 获取所有二级学院名称
    get_collegeName() {
      this.$http
        .get("http://127.0.0.1:8080/bigAdmin/get_collegeName")
        .then((res) => {
          // console.log(res);
          this.college_name = res.data.data;
        });
    },
    // 获取二级管理员的信息
    secondaryInfo() {
      this.$http
        .post(
          "http://127.0.0.1:8080/bigAdmin/secondaryInfo",
          this.$qs.stringify(this.formInline)
        )
        .then((res) => {
          if (res.data.status == 0) {
            this.tableData = res.data.data;
          } else {
            this.tableData = [];
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    onSubmit() {
      this.secondaryInfo();
    },
    // 查看管理员
    handleEdit(row) {
      this.$http
        .post(
          "http://127.0.0.1:8080/bigAdmin/see_secondaryInfo",
          this.$qs.stringify(row)
        )
        .then((res) => {
          if (res.data.status == 0) {
            this.dialogVisibles = true;
            this.sinfo = res.data.data[0];
            // console.log(res);
          }
        });
    },
    // 修改密码按钮
    handleUpdate(row) {
      console.log(row);
      this.dialogVisibless = true;
      this.$http
        .post(
          "http://127.0.0.1:8080/bigAdmin/get_secondaryInfopwd",
          this.$qs.stringify(row)
        )
        .then((res) => {
          // console.log(res);
          if (res.data.status == 0) {
            this.forms.old = res.data.data[0].password;
            // console.log(res.data.data[0].password);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    trueUpdate() {
      this.$refs.forms.validate((valid) => {
        if (!valid) return;
        this.$http
          .post(
            "http://127.0.0.1:8080/bigAdmin/update_secondaryInfopwd",
            this.$qs.stringify(this.forms)
          )
          .then((res) => {
            if (res.data.status == 0) {
              this.$message.success(res.data.message);
              this.dialogVisibless = false;
              this.forms.new = "";
            } else {
              this.$message.error(res.data.message);
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });
      });
    },
    onAdd() {
      this.dialogVisible = true;
    },

    true_add() {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) return;
        this.$http
          .post(
            "http://127.0.0.1:8080/bigAdmin/add_secondaryInfo",
            this.$qs.stringify(this.ruleForm)
          )
          .then((res) => {
            if (res.data.status == 0) {
              this.secondaryInfo();
              this.ruleForm = [];
              this.$message.success(res.data.message);
            } else {
              this.$message.error(res.data.message);
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });
      });
    },
    // 删除
    handleDelete(row) {
      this.$http
        .post(
          "http://127.0.0.1:8080/bigAdmin/dele_secondaryInfo",
          this.$qs.stringify(row)
        )
        .then((res) => {
          if (res.data.status == 0) {
            this.$message.success(res.data.message);
            this.secondaryInfo();
            this.ruleForm = {};
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          this.$message.error(error);
        });
    },

    async handle(file) {
      // 读取文件
      let data = await readFiles(file.raw);
      let workbook = xlsx.read(data, { type: "binary" });
      let work = workbook.Sheets[workbook.SheetNames[0]];
      data = xlsx.utils.sheet_to_json(work);
      // console.log(data);

      var character = {
        student_name: {
          text: "姓名",
          type: "string",
        },
        student_num: {
          text: "学号",
          type: "string",
        },
        student_class: {
          text: "专业",
          type: "string",
        },
        college_name: {
          text: "所属学院",
          type: "string",
        },
      };

      //把读取处来的数据变为最后可以上传的数据
      data.forEach((val) => {
        let obj = {};
        for (let key in character) {
          if (!character.hasOwnProperty(key)) break;
          let v = character[key],
            text = v.text,
            type = v.type;
          v = val[text] || "";
          type == "string" ? (v = String(v)) : null;
          type == "number" ? (v = Number(v)) : null;
          obj[key] = v;
        }
        this.fileinfo.push(obj);
      });
    },
    submitUpload() {
      // console.log(this.fileinfo);
      this.$http
        .post(
          "http://127.0.0.1:8080/bigAdmin/insert_file",
          this.$qs.stringify(this.fileinfo)
        )
        .then((res) => {
          console.log(res);
        });
      // console.log(...this.fileinfo);
    },
  },
};
</script>
<style lang="less" scoped>
.upload-demo {
  float: right;
  margin: 0 20px;
}
</style>